<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>颜色选择器</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->

		<!-- 颜色选择器start -->
		<script type="text/javascript" src="../../libs/js/form/color.js"></script>
		<!-- 颜色选择器end -->

	</head>

	<body>
		<div class="page_content">

			<div class="groupTitle"><span>1、基本使用</span></div>

			<input type="text" class="color" id="color1" />
			<input type="button" value="获取值" onclick="getValue()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>2、初始时默认值</span></div>

			<input type="text" class="color" value="00FF00" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>3、禁用/启用</span></div>

			<input type="text" class="color" id="color3" disabled="true" />
			<input type="button" value="启用" onclick="enableSelect()" />
			<input type="button" value="禁用" onclick="disableSelect()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>4、动态创建</span></div>

			<input type="button" value="点击生成颜色选择器" id="testBtn" onclick="createColor()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>5、动态赋值</span></div>

			<input type="text" class="color" id="color5" />
			<input type="button" value="点击赋值" onclick="setValue('FF00FF')" />

			<div class="height_15"></div>
		</div>
		<script>
			//获取值
			function getValue() {
				top.Toast("showNoticeToast", $("#color1").val())
			}

			//设为不可用
			function disableSelect() {
				$("#color3").attr("disabled", true);
			}
			//设为可用
			function enableSelect() {
				$("#color3").attr("disabled", false);
			}

			//动态创建
			function createColor() {
				var $color = $('<input type="text" class="color"/>');
				$("#testBtn").after($color);
				$color.render();
			}

			//动态赋值
			function setValue(str) {
				$("#color5").val(str);
				$("#color5")[0].style.backgroundColor = "#" + str;
			}
		</script>
	</body>

</html>